<template>
  <view class="navbar" :style="{ paddingTop: safeAreaInsets.top + 'px' }">
    <view class="logo">
      <img src="@/static/images/logo.png" alt="" class="logo-img" />
      <span style="margin: 0 10rpx; color: #fff; opacity: 0.8; height: 42rpx"
        >|</span
      >
      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
    </view>
    <!-- 搜索条 -->
    <view class="search">
      <uni-easyinput
        v-model="searchValue"
        type="text"
        placeholder="请输入商品名称"
        prefixIcon="search"
      />
    </view>
  </view>
</template>

<script setup>
const { safeAreaInsets } = uni.getSystemInfoSync();
console.log(uni.getSystemInfoSync());
</script>
<style lang="scss" scoped>
.navbar {
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20rpx 30rpx;
  background-image: url("@/static/images/navigator_bg.png");
  .logo {
    display: flex;

    line-height: 42rpx;
    align-items: center;
    height: 42rpx;
    &-img {
      width: 120rpx;
      height: 40rpx;
    }
    &-text {
      font-size: 32rpx;
      color: #fff;
      opacity: 0.8;
    }
  }
  .search {
    margin: 20px 0 10px 0;
    width: 100%;
    height: 60rpx;
    border-radius: 50%;
  }
}
</style>
